<template>
<h1>角色管理</h1>
<el-table :data="roleList" stripe>
  <el-table-column prop="roleName" label="角色名称">
  </el-table-column>
  <el-table-column label="操作">
    <template #default="scope">
      <el-button type="danger" @click="removeRole(scope.row.roleId)">删除角色</el-button>
      <el-button type="primary" @click="viewRole(scope.row)">查看角色权限</el-button>
      <el-button type="primary" @click="updateRole(scope.row)">修改角色权限</el-button>
    </template>
  </el-table-column>
</el-table>
  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>
<!--添加角色-->
  <el-dialog v-model="addVisible" title="添加角色" width="30%">

    <el-form :model="roleForm" ref="roleForm" rules="rules">
      <el-form-item label="角色名称">
        <el-input v-model="roleForm.roleName"></el-input>
      </el-form-item>
    </el-form>
    <span>拥有权限：</span>
    <el-checkbox-group v-model="lArray">
      <el-checkbox :label="l.limitId" v-for="l in limitArray" :key="l.limitId">
        {{l.limitDesc}}
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addRole()">添加</el-button>
      </span>
    </template>
  </el-dialog>

<!--  查看角色权限-->
  <el-dialog v-model="findVisible" title="查看角色权限" width="30%">
    <el-form :model="roleForm">
      <el-form-item label="角色名称" prop="roleName">
        <span>{{roleForm.roleName}}</span>
      </el-form-item>
    </el-form>
    <span>拥有权限：</span><br>
    <span v-for="l in limitList">{{l}}&nbsp;&nbsp;&nbsp;</span>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="findVisible=false">返回</el-button>
      </span>
    </template>
  </el-dialog>

  <!--  修改角色权限-->
  <el-dialog v-model="updateVisible" title="修改角色权限" width="30%">
    <el-form :model="roleForm">
      <el-form-item label="角色名称" prop="roleName">
        <span>{{roleForm.roleName}}</span>
      </el-form-item>
      <el-form-item prop="roleId"></el-form-item>
    </el-form>
    <span>拥有权限：</span><br>
    <el-checkbox-group v-model="lArray">
      <el-checkbox :label="l.limitId" v-for="l in limitArray" :key="l.limitId">
        {{l.limitDesc}}
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="xiugai">修改</el-button>
      </span>
    </template>
  </el-dialog>

  <el-button type="primary" @click="addDialog">添加新角色</el-button>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  created() {
    this.reload()
  },
  name: "Role",
  data(){
    return{
      roleList:[],
      curPage:1,
      pageSize:4,
      total:0,
      addVisible:false,
      findVisible:false,
      updateVisible:false,
      lArray:[],
      limitArray:[],
      limitList:[],
      roleForm:{},
      rules:{roleName: [{required:true,message:'请输入角色名称',trigger:'blur'}]}
    }

  },
  methods:{
    removeRole(roleId){
      let param = new URLSearchParams();
      param.append("roleId",roleId);
      axios.post("/api/role/removeRole",param).then(response=>{
        if (response.data=='success'){
          this.reload();
        }
      })
    }  ,
    addRole(){
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          if (this.lArray.length==0){
            ElMessage.error("请至少选择一个权限");
            return;
          }
          let param = new URLSearchParams();
          param.append("roleName",this.roleForm.roleName);
          param.append("limitIds",this.lArray);
          axios.post("/api/role/addRole",param).then(response=>{
            if (response.data=='success'){
              this.reload();
              this.addVisible = false;
              ElMessage.success("添加成功")
            }else {
              ElMessage.error("添加失败")
            }
          })
        }else {
          ElMessage.error("角色名称不能为空")
        }
      });

    },
    viewRole(row){
      this.roleForm = row;
      let param =new URLSearchParams();
      param.append("roleId",row.roleId);
       axios.post("/api/role/findLimitDescByRoleId",param).then(response=>{
         this.limitList = response.data;
         this.findVisible = true;
       })
    },
    updateRole(row){
      this.roleForm = row;
      let param =new URLSearchParams();
      param.append("roleId",row.roleId);
      axios.post("/api/role/findLimitBeans",null).then(response=>{
        this.limitArray = response.data;
        this.updateVisible = true;
        axios.post("/api/role/findLimitIdsByRoleId",param).then(response=>{
          this.lArray = response.data
        })
      })
    },
    xiugai(){
      if (this.lArray.length == 0){
        ElMessage.error("请至少选择一个权限");
        return;
      }
      let param = new URLSearchParams();
      param.append("roleId",this.roleForm.roleId);
      param.append("limitIds",this.lArray);
      axios.post("/api/role/modifyRoleLimit",param).then(response=>{
        if (response.data=='success'){
          this.updateVisible = false;
        }else {
          ElMessage.error("修改失败")
        }
      })
    },
    addDialog(){
      this.lArray = [];
      this.roleForm = {}
      axios.post("/api/role/findLimitBeans",null).then(response=>{
          this.limitArray = response.data;
          this.addVisible = true;
      })
    },
    reload(){
      let param = {
        "pageNo" :this.curPage,
        "pageSize" : this.pageSize
      }
      axios.post("/api/role/findRolesByPage",param).then(response=>{
        let data =response.data;
        this.roleList = data.records;
        this.total = data.total;
      })
    }
  }
}
</script>

<style scoped>

</style>